<template>
  <div class="page"  ref="gun" style="background: #fff;">
    <div class="top_div">
      <div class="title">乡品</div>
      <img class="top_img" src="~@/assets/img/product/top_bg.png" alt="" @click="$router.push('product')">
    </div>
    
    <div class="newsList flex_ac">
      <img class="left_img" src="~@/assets/img/product/tj.png" />
      <div class="line"></div>
      <div class="newsC">
        <div class="news_item flex_ac">
          <div class="news_i_title">{{'焊接机器人为工业经济经济添火加速:技术xxxxxxx'}}</div>
        </div>
        <div class="h8"></div>
        <div class="news_item flex_ac">
          <div class="news_i_title">{{'全球首台耐低温自动加加氢氢机器人完成xxxxxxx'}}</div>
        </div>
      </div>
      <van-icon class="mla" name="arrow" size="18" color="#676767" />
    </div>

    <div class="flex_sb ml10 mr10 mt10">
      <div class="main_left">
        <div class="m_title">乡村集市</div>
        <div class="h8"></div>
        <div class="m_desc">生态自然   天然美味</div>
        <div class="h6"></div>
        <div class="flex_ac mb15">
          <img class="l_img" src="~@/assets/img/product/l_img.png" alt="">
          <div>
            <div class="l_title mb8">成武香油</div>
            <div class="l_label">小磨香油</div>
          </div>
        </div>
        <div class="flex_ac">
          <img class="l_img" src="~@/assets/img/product/l_img.png" alt="">
          <div>
            <div class="l_title mb8">成武香油</div>
            <div class="l_label">小磨香油</div>
          </div>
        </div>
      </div>
      <div class="main_right">
        <div class="r_item bg1">
          <div class="h15"></div>
          <div class="m_desc ml15 mb6" style="color: #5D300F;">生态自然   天然美味</div>
          <div class="m_title ml15" style="color: #5D300F;">成武好店</div>
          <div class="r_bottom flex_ac bg3">
            <div class="b_btn">立即查看</div>
          </div>
          <img class="r_img" src="~@/assets/img/product/r_img.png" alt="">
        </div>
        <div class="h15"></div>
        <div class="r_item bg2">
          <div class="h15"></div>
          <div class="m_desc ml15 mb6" style="color: #5D300F;">生态自然   天然美味</div>
          <div class="m_title ml15" style="color: #5D300F;">成武好店</div>
          <div class="r_bottom flex_ac bg4">
            <div class="b_btn">立即查看</div>
          </div>
          <img class="r_img" src="~@/assets/img/product/r_img.png" alt="">
        </div>
      </div>
    </div>

    <div class="h20"></div>
    <div class="box_div1" ref="list_div">
      <div class="box_type flex_ac">
        <div v-for="i,k in typeList" :key="k" class="type_item" :class="type_id==i.id?'type_item_a':''" @click="changeType(i.id)">
          <div>{{ i.name }}</div>
        </div>
      </div>
      <van-list
        v-model="isLoad"
        :finished="isfinish"
        finished-text="没有更多了"
        @load="getMore"
      >
        <template v-for="i,k in list">
          <proList1 v-if="type_id==1" :i="i" :key="k"/>
          <proList2 v-if="type_id==2" :i="i" :key="k"/>
        </template>
      </van-list>
    </div>
    <div class="h50"></div>
    <Tabbar :current="1" />
  </div>
</template>
<script>
import { shop } from '@/api/api'

import proList1 from '@/components/proList1.vue'
import proList2 from '@/components/proList2.vue'
import Tabbar from '@/components/Tabbar.vue'
export default {
  data() {
    return {
      type_id:2,
      keywords: '',
      typeList: [
        {name:'推荐好店',id:'2'},
        {name:'推荐电商',id:'1'},
      ],

      isLoad: true,
      isfinish: false, //是否加载
      page: 1,
      total: 0,
      list:[],
    }
  },
  components: {
    Tabbar,
    proList1,
    proList2,
  },
  created() {
    this.getList()
  },
  methods: {
    changeType(id) { 
      this.type_id = id
      this.init()

      this.$refs.list_div.scrollIntoView({
        block: 'start',
        behavior: 'smooth'
      });  
    },
    init() {
      this.isfinish = false
      this.isLoad = true
      this.page = 1
      this.list = []
      this.getList()
    },
    getList() {
      if (this.isfinish) {
        return
      }
      let data = {
        type_id: this.type_id,
        page: this.page,
      }
      shop.getList({ ...data }).then(res => {
        this.isLoad = false
        res.data.data.forEach((item,key)=> {
          res.data.data[key]['type_names']=item.type_names.split(',')
        });
        if (this.page == 1) {
          this.list = res.data.data
        } else {
          this.list.push(...res.data.data)
        }
        this.total = res.data.total
        if (this.list.length >= res.data.total) {
          this.isfinish = true
        }
      })
    },
    getMore() {
      if (this.isfinish || this.list.length == 0) {
        this.isLoad = false
        return
      }
      this.page += 1
      this.getList()
    },
  }
}
</script>
<style lang="scss" scoped>
.top_div{
  position: relative;
  width: 100%;
  background: linear-gradient(180deg, #F9EFDE 0%, rgba(255,254,253,0.6) 100%);
  .top_img{
    width: 100%;
    height: 244px;
  }
  .title{
    position: absolute;
    left: 10px;
    top: 10px;
    font-weight: 500;
		font-size: 18px;
		color: #000;
  }
}

.newsList{
	position: relative;
  border-radius: 3px;
	padding: 6px 10px;
	width: calc(100% - 20px);
	.left_img{
		width: 46px;
		height: 48px;
		margin-right: 5px;
    position: relative;
    top: 2px;
	}
	.line{
		width: 1px;
		height: 35px;
		background: #000000;
		opacity: 0.06;
    margin-right: 5px;
	}
	.newsC{
		width: calc(100% - 50px);
		.news_item{
			.news_i_type{
				width: 30px;
				height: 15px;
				background: #FFFFFF;
				box-shadow: 4px 5px 10px 0px rgba(203,203,203,0.34);
				border-radius:3px;
				font-size: 11px;
				line-height: 15px;
				text-align: center;
				margin-right: 6px;
			}
			.news_i_type1{
				color: #D33228;
			}
			.news_i_type2{
				color: #206CFF;
			}
			.news_i_title{
				width: calc(100% - 38px);
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
				font-size: 12px;
				color: #676767;
			}
		}
	}
}

.m_title{
  font-weight: bold;
  font-size: 16px;
  color: #915530;
}
.m_desc{
  font-weight: 400;
  font-size: 13px;
  color: #915530;
}

.main_left{
  width: calc(50% - 7.5px);
  height: 215px;
  background: linear-gradient(-50deg, #FFDFC0 0%, #FFEFE2 100%);
  border-radius: 15px;
  padding: 15px;
  box-sizing: border-box;
  .l_img{
    width: 70px;
    height: 60px;
    margin-right: 8px
  }
  .l_title{
    font-size: 15px;
    color: #915530;
  }
  .l_label{
    height: 16px;
    line-height: 16px;
    padding: 0 6px;
    border-radius: 3px;
    border: 1px solid #915530;
    font-size: 11px;
    color: #915530;
  }
}
.main_right{
  width: calc(50% - 7.5px);
  .bg1{
    background: linear-gradient(-26deg, #FAC835 0%, #FDDF8B 100%);
  }
  .bg2{
    background: linear-gradient(-12deg, #DE95CA 0%, #F3D7ED 100%);
  }
  .r_item{
    height: 100px;
    position: relative;
    border-radius: 15px;
    .r_img{
      position: absolute;
      right: 0;
      bottom: 0;
      width: 78px;
      height: auto;
    }
    .r_bottom{
      border-radius: 0px 0px 15px 15px;
      height: 30px;
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      .b_btn{
        width: 55px;
        height: 18px;
        background: #FF1088;
        border-radius: 5px;
        font-size: 10px;
        color: #FFFFFF;
        text-align: center;
        line-height: 18px;
        margin-left: 15px;
      }
    }
    .bg3{
      background: linear-gradient(0deg, #FFE3B3 0%, #FFF4E1 100%);
    }
    .bg4{
      background: linear-gradient(0deg, #FFEBEF 0%, #E7C5DD 100%);
    }
  }
}

.box_div1{
  margin: 0 10px 10px;
  background: #FFFFFF;
  box-shadow: 0px 3px 9px 2px rgba(250,135,30,0.13);
  border-radius: 4px 4px 4px 4px;
  min-height: 100%;
  .box_type{
    height: 40px;
    position: sticky;
    top: 0;
    z-index: 10;
    background: #fff;
    padding-left: 10px;
    .type_item{
      font-size: 15px;
      color: #000000;
      margin-right: 20px;
      position: relative;
    }
    .type_item_a{
      font-weight: bold;
      font-size: 18px;
      color: #FA871E;
      &::after{
        content: '';
        position: absolute;
        width: 100%;
        bottom: 0;
        left: 0;
        height: 6px;
        background: linear-gradient(90deg,#EB741800, #EB741888);
        border-radius: 1px;
      }
    }
  }
}
</style>